<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>icon example</title>
    <link rel="stylesheet" href="./page.css">
    <link rel="stylesheet" href="./icon.css">
</head>
<body>
    <div class="main">
    <h1>预览字体</h1>
    <ul class="icon-list">

        <li>
            <i class="icon">&#x21;</i>
            <div class="code">\21</div>
            <div class="name">exclam</div>
        </li>

        <li>
            <i class="icon">&#x22;</i>
            <div class="code">\22</div>
            <div class="name">quotedbl</div>
        </li>

        <li>
            <i class="icon">&#x23;</i>
            <div class="code">\23</div>
            <div class="name">numbersign</div>
        </li>

        <li>
            <i class="icon">&#x24;</i>
            <div class="code">\24</div>
            <div class="name">dollar</div>
        </li>

        <li>
            <i class="icon">&#x25;</i>
            <div class="code">\25</div>
            <div class="name">percent</div>
        </li>

        <li>
            <i class="icon">&#x26;</i>
            <div class="code">\26</div>
            <div class="name">ampersand</div>
        </li>

        <li>
            <i class="icon">&#x27;</i>
            <div class="code">\27</div>
            <div class="name">quotesingle</div>
        </li>

        <li>
            <i class="icon">&#x28;</i>
            <div class="code">\28</div>
            <div class="name">parenleft</div>
        </li>

        <li>
            <i class="icon">&#x29;</i>
            <div class="code">\29</div>
            <div class="name">parenright</div>
        </li>

        <li>
            <i class="icon">&#x2a;</i>
            <div class="code">\2a</div>
            <div class="name">asterisk</div>
        </li>

        <li>
            <i class="icon">&#x2b;</i>
            <div class="code">\2b</div>
            <div class="name">plus</div>
        </li>

        <li>
            <i class="icon">&#x2c;</i>
            <div class="code">\2c</div>
            <div class="name">comma</div>
        </li>

        <li>
            <i class="icon">&#x2d;</i>
            <div class="code">\2d</div>
            <div class="name">hyphen</div>
        </li>

        <li>
            <i class="icon">&#x2e;</i>
            <div class="code">\2e</div>
            <div class="name">period</div>
        </li>

        <li>
            <i class="icon">&#x2f;</i>
            <div class="code">\2f</div>
            <div class="name">slash</div>
        </li>

        <li>
            <i class="icon">&#x30;</i>
            <div class="code">\30</div>
            <div class="name">zero</div>
        </li>

        <li>
            <i class="icon">&#x31;</i>
            <div class="code">\31</div>
            <div class="name">one</div>
        </li>

        <li>
            <i class="icon">&#x32;</i>
            <div class="code">\32</div>
            <div class="name">two</div>
        </li>

        <li>
            <i class="icon">&#x33;</i>
            <div class="code">\33</div>
            <div class="name">three</div>
        </li>

        <li>
            <i class="icon">&#x34;</i>
            <div class="code">\34</div>
            <div class="name">four</div>
        </li>

        <li>
            <i class="icon">&#x35;</i>
            <div class="code">\35</div>
            <div class="name">five</div>
        </li>

        <li>
            <i class="icon">&#x36;</i>
            <div class="code">\36</div>
            <div class="name">six</div>
        </li>

        <li>
            <i class="icon">&#x37;</i>
            <div class="code">\37</div>
            <div class="name">seven</div>
        </li>

        <li>
            <i class="icon">&#x38;</i>
            <div class="code">\38</div>
            <div class="name">eight</div>
        </li>

        <li>
            <i class="icon">&#x39;</i>
            <div class="code">\39</div>
            <div class="name">nine</div>
        </li>

        <li>
            <i class="icon">&#x3a;</i>
            <div class="code">\3a</div>
            <div class="name">colon</div>
        </li>

        <li>
            <i class="icon">&#x3b;</i>
            <div class="code">\3b</div>
            <div class="name">semicolon</div>
        </li>

        <li>
            <i class="icon">&#x3c;</i>
            <div class="code">\3c</div>
            <div class="name">less</div>
        </li>

        <li>
            <i class="icon">&#x3d;</i>
            <div class="code">\3d</div>
            <div class="name">equal</div>
        </li>

        <li>
            <i class="icon">&#x3e;</i>
            <div class="code">\3e</div>
            <div class="name">greater</div>
        </li>

        <li>
            <i class="icon">&#x3f;</i>
            <div class="code">\3f</div>
            <div class="name">question</div>
        </li>

        <li>
            <i class="icon">&#x40;</i>
            <div class="code">\40</div>
            <div class="name">at</div>
        </li>

        <li>
            <i class="icon">&#x41;</i>
            <div class="code">\41</div>
            <div class="name">A</div>
        </li>

        <li>
            <i class="icon">&#x42;</i>
            <div class="code">\42</div>
            <div class="name">B</div>
        </li>

        <li>
            <i class="icon">&#x43;</i>
            <div class="code">\43</div>
            <div class="name">C</div>
        </li>

        <li>
            <i class="icon">&#x44;</i>
            <div class="code">\44</div>
            <div class="name">D</div>
        </li>

        <li>
            <i class="icon">&#x45;</i>
            <div class="code">\45</div>
            <div class="name">E</div>
        </li>

        <li>
            <i class="icon">&#x46;</i>
            <div class="code">\46</div>
            <div class="name">F</div>
        </li>

        <li>
            <i class="icon">&#x47;</i>
            <div class="code">\47</div>
            <div class="name">G</div>
        </li>

        <li>
            <i class="icon">&#x48;</i>
            <div class="code">\48</div>
            <div class="name">H</div>
        </li>

        <li>
            <i class="icon">&#x49;</i>
            <div class="code">\49</div>
            <div class="name">I</div>
        </li>

    </ul>

    <div class="helps">第一步：使用font-face声明字体
<pre>
@font-face {
    font-family: 'fonteditor';
    src: url('fonteditor.eot'); /* IE9*/
    src: url('fonteditor.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonteditor.woff') format('woff'), /* chrome、firefox */
    url('fonteditor.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('fonteditor.svg#uxfonteditor') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用fonteditor的样式
<pre>
.fonteditor {
    font-family:"fonteditor" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
    &lt;i class="fonteditor"&gt;&amp;#x33&lt;/i&gt;
</pre>
</div>
</div>


</body>
</html>
